<template>
  <div>
    <!-- 模糊查询   表单   根据字段查询   -->
    <el-form :inline="true" :model="course" ref="course" class="demo-form-inline">
      <el-form-item label="课程名称" prop="title">
        <el-input v-model="course.title" placeholder="课程名称"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="course.status" placeholder="状态">
          <el-option label="禁用" value="0"></el-option>
          <el-option label="正常" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否免费" prop="courseOriginal">
        <el-select v-model="course.isFree" placeholder="是否免费">
          <el-option label="免费" value="1"></el-option>
          <el-option label="收费" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary"  @click="resetForm('course')">重置</el-button>
      </el-form-item>
    </el-form>



    <!--  table表格 数据展示 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="cid"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="cover"
        label="课程封面">
        <template slot-scope="scope">
          <img :src="scope.row.cover" alt="" width="100px" />
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="课程名称">
      </el-table-column>
      <el-table-column
        v-if="false"
        prop="isFree"
        label="是否收费">
      </el-table-column>
      <el-table-column
        v-if="false"
        prop="inid"
        label="简绍">
      </el-table-column>
      <el-table-column
        prop="futitle"
        label="课程分类">
      </el-table-column>
      <el-table-column
        width="110px"
        prop="original"
        label="价格">
      </el-table-column>
      <!--  elementui 转变    -->
      <!--<el-table-column-->
        <!--prop="status"-->
        <!--label="状态"-->
        <!--align="center">-->
        <!--<template slot-scope="scope">-->
          <!--<el-switch-->
            <!--style="display: block"-->
            <!--v-model="scope.row.status"-->
            <!--@change="handleChangeStatus(scope.row,scope.row.status)"-->
            <!--:active-value="1"-->
            <!--:inactive-value="2"-->
            <!--active-color="#13ce66 "-->
            <!--inactive-color="#ff4949"-->
            <!--active-text="上架"-->
            <!--inactive-text="下架">-->
          <!--</el-switch>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="csort"-->
        <!--label="排序">-->
      <!--</el-table-column>-->
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)" type="success" round>修改</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!--  table 表格的分页    -->
    <div class="block" align="center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.current"
        :page-sizes="pageSizes"
        :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </div>
    <!-- 修改信息的会话层   -->
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose">
      <!--form  表单      -->
      <el-form  :model="ruleForm" status-icon  ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="课程名称:" prop="title">
          <el-input type="text"   style="width: 40%" v-model="ruleForm.title" autocomplete="off" ></el-input>
        </el-form-item>
        <!--  单选框        -->
        <el-form-item label="是否收费:" prop="pass">
          <el-radio-group v-model="ruleForm.isFree">
            <el-radio :label="1">免费</el-radio>
            <el-radio :label="0">收费</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--  计数器        -->
        <el-form-item label="排序:" prop="pass">
          <el-input-number v-model="ruleForm.csort" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="课程介绍:" prop="pass">
          <!--使用编辑器-->
          <div class="edit_container">
            <quill-editor v-model="ruleForm.introduce"
                          ref="myQuillEditor"
                          class="editer"
                          :options="ruleForm.editorOption" @ready="onEditorReady($event)">
            </quill-editor>
          </div>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="submitForm" >提交</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>




  </div>
</template>

<script>
  /*编辑器的引用*/
  import { quillEditor } from 'vue-quill-editor' //调用编辑器
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  /*qs传递数据*/
  import qs from 'qs'
    export default {
        name: "liebiao",
      methods: {
        /*table  表格*/
        tableRowClassName({row, rowIndex}) {
          if (rowIndex === 1) {
            return 'warning-row';
          } else if (rowIndex === 3) {
            return 'success-row';
          }
          return '';
        },
        /*form 表单的提交事件*/
        onSubmit() {
          // alert(JSON.stringify(this.course))
          this.queryAll();
        },
        /*重置事件的方法*/
        resetForm(formName) {
          this.$refs[formName].resetFields();
          /*清空模糊查询的数组  再次调用查询方法*/
          this.queryAll();
        },
        //禁用按钮
        handleChangeStatus(obj,status){
          const title = { 1: '上架', 2: '下架' }
          this.$confirm(`确定要${title[status]}吗?`, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //当点确定是出发商品的上架下架的状态的改变
            this.$axios.post("/course/edu-course/upStatus",qs.stringify(obj)).then(res=>{
              /*当返回值是false时   不改变前台页面  上下架的状态值*/
              if (res.data===false){
                obj.status=(status+1)%2;
              }
            })
          }).catch(() => {
            obj.status=(status+1)%2
          })
        }
        ,
        /* 分页  换页事件的  方法  */
        handleSizeChange(val) {
          this.pageInfo.size = `${val}`;
          this.pageInfo.records = {};
          console.log(`每页 ${val} 条`);
          /* 数据表格查询方法 */
          this.queryAll();
          // alert(JSON.stringify(this.pageInfo))
        },
        handleCurrentChange(val) {
          this.pageInfo.current = `${val}`;
          this.pageInfo.records = {};
          /* 数据表格查询方法 */
          this.queryAll();
          // console.log(`当前页: ${val}`);
          // alert(JSON.stringify(this.pageInfo))
        }
        /*table   修改按钮   信息 的 修改   事件方法*/
        ,
        handleEdit(index,row){
          // alert("index"+JSON.stringify(index)+"============"+"row"+JSON.stringify(row));
          /* 修改信息的会话层   form 表单  */
          this.dialogVisible = true;
          /*把table一行的值赋给ruleForm*/
          this.ruleForm.title=row.title;
          this.ruleForm.csort=row.csort;
          this.ruleForm.isFree=row.isFree;
          this.ruleForm.cid=row.cid;
          /*根据id查询出课程的简绍 */
          this.$axios.get("/course/course-introduce/findOne/"+row.inid).then(res=>{
            /*将查询出来的课程简绍赋值给ruleForm.introduce*/
            this.ruleForm.introduce=res.data.introduce;
            this.ruleForm.id=res.data.id;
          })
        }
        /*form表单   X号关闭的方法事件*/
        ,
        handleClose(done) {
          this.$confirm('你确定要关闭此弹窗吗?')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        /*form计数器事件*/
        handleChange(value) {
          console.log(value);
        }
        /*form   文本编辑器*/
        ,onEditorReady(editor) {
        },
        /*查询所有   模糊查询*/
        queryAll(){

          //将模糊查询的值 赋值给pageinfo
          this.pageInfo.title=this.course.title;
          this.pageInfo.status=this.course.status;
          this.pageInfo.isFree=this.course.isFree;


          this.$axios.post("/course/edu-course/queryAll",qs.stringify(this.pageInfo)).then(res=>{
            /*查询出来的数据赋值给tableData*/
            this.tableData=res.data.records;
            /*把查询值的条数赋值给pageInfo.total*/
            this.pageInfo.total=res.data.total;
          })
        },
        /*修改form的提交按钮*/
        submitForm(){
          this.$axios.post("/course/edu-course/upd",qs.stringify(this.ruleForm)).then(res=>{
            // alert(JSON.stringify(res.data));
            if (res.data===true){
              this.dialogVisible=false;
              this.queryAll();
            }else {
              alert("报错！！！！！！");
            }
          })

        }
      },
      /*页面刷新执行*/
      created() {
        this.queryAll();
      }
      ,
      data() {
        return {
          /*table表格数据*/
          tableData:  [],
          /*form 表单 绑定值*/
          formInline: {
            user: '',
            region: ''
          },
          /*分页 的 数 据*/
          pageSizes: [2, 4],
          pageInfo: {current: 1, size: 2, total: 9}
          ,
          /*模糊查询的值*/
          course:{
            title:'',
            status:'',
            isFree:''},
          /* 修改信息的会话层   form 表单  */
          dialogVisible : false
          ,
          /*form表单的数据*/
          ruleForm: {
            title: '',
            original:'',
            introduce : '',
            /*form表单是否收费单选框*/
            isFree:'',
            id:'',
            cid:'',
            //  计数器的数据
            csort:1,

            editorOption: {}
          }
        }
      },

      components: {
//使用编辑器
        quillEditor
      }
    }
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
